import React from "react";
import { View, Text, Image, StyleSheet, Dimensions } from "react-native";
import { SwiperFlatList } from "react-native-swiper-flatlist";

const MallSwiper = () => {
    const { width } = Dimensions.get('window');
    const styles = StyleSheet.create({
        swiper: {
            width,
            height: 200,
            paddingLeft:10,
            paddingRight:10,
        },
        child: {
            justifyContent: 'center'
        },
        imgs:{
            width: width,
            height: 200,
            resizeMode: 'cover',//适应屏幕
        }
    })
    const images = [
        require('../../assets/images/1.webp'),
        require('../../assets/images/2.webp'),
        require('../../assets/images/3.webp'),
    ];
    return (
        <View style={styles.swiper}>
            <SwiperFlatList
                autoplay// 自动播放
                autoplayDelay={3} // 3秒后开始自动播放
                autoplayLoop// 自动循环播放
                index={0} // 设置初始索引
                showPagination// 显示页码
                paginationStyleItem={{ width: 8, height: 8, borderRadius: 4, marginHorizontal: 4 ,backgroundColor: '#fff'}} // 设置页码的样式
                paginationStyleItemActive={{ backgroundColor: '#000' }} // 设置当前页码的样式
                data={images}
                renderItem={({ item }) => (
                    <View style={[styles.child]}   >
                        <Image source={item} style={styles.imgs}/>
                    </View>
                )}
            />
        </View>
    )
}
export default MallSwiper